<template>
  <div class="home">
    <div class="home-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" :title="item" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { computed } from "vue";

const store = useStore();

const list = computed(() => store.state.list);
const loading = computed({
  get: () => store.state.loading,
  set: (value) => store.commit("setLoading", value),
});
const finished = computed({
  get: () => store.state.finished,
  set: (value) => store.commit("setFinished", value),
});
const refreshing = computed({
  get: () => store.state.refreshing,
  set: (value) => store.commit("setRefreshing", value),
});

const onLoad = () => store.dispatch("onLoad");
const onRefresh = () => store.dispatch("onRefresh");
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;

  .home-list {
    flex: 1;
  }
}
</style>
